<template>
  <a-card :body-style="{ padding: 0, width: '100%' }" class="table-footer-container" :bordered="isBordered">
    <div class="flex items-center justify-between">
      <div class="page-size">
        <template v-if="pagination.showSizePicker">
          每页展示
          <a-select
            :trigger-props="{ updateAtScroll: true }"
            popup-container="body"
            v-model="pagination.pageSize"
            :options="pagination.pageSizes"
            :allow-clear="false"
            class="page-size-select"
            size="small"
            @change="onPageSizeChange"
          />
          项结果
        </template>
      </div>
      <a-pagination
        v-model:current="pagination.page"
        v-model:pageSize="pagination.pageSize"
        :total="pagination?.pageCount"
        show-total
        @change="onChange"
        size="medium"
      />
    </div>
  </a-card>
</template>

<script lang="ts">
  import { computed, defineComponent, toRef } from 'vue'
  export default defineComponent({
    name: 'TableFooter',
    props: {
      pagination: {
        type: Object,
        default: () => ({}),
        require: true,
      },
      bordered: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      const pagination = toRef(props, 'pagination')
      const isBordered = computed(() => props.bordered)
      function onChange(page: number) {
        ;(pagination as any).value.page = page
        emit('change')
      }
      function onPageSizeChange(pageSize: number) {
        ;(pagination as any).value.page = 1
        ;(pagination as any).value.pageSize = pageSize
        emit('change')
      }
      return {
        isBordered,
        onChange,
        onPageSizeChange,
      }
    },
  })
</script>
<style lang="less" scoped>
  .table-footer-container {
    height: 52px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
  }
  .page-size {
    font-size: 12px;
    :deep(.arco-select-view-single) {
      width: unset;
      padding: 0 10px;
      margin: 0 3px;
      .arco-select-view-suffix {
        padding-left: 5px;
      }
    }
  }
</style>
